<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <title>WMS-演示版</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <link href="/style/basic_layout.css" rel="stylesheet" type="text/css">
    <link href="/style/common_style.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="/js/jquery/jquery.js"></script>
    <script type="text/javascript" src="/js/plugins/My97DatePicker/WdatePicker.js"></script>
    <script type="text/javascript" src="/js/plugins/validata/jquery.validate.min.js"></script>
    <script type="text/javascript" src="/js/plugins/validata/messages_cn.js"></script>
    <script type="text/javascript" src="/js/plugins/artDialog/jquery.artDialog.js?skin=blue"></script>
    <script type="text/javascript" src="/js/plugins/artDialog/iframeTools.js"></script>
    <script type="text/javascript" src="/js/plugins/form/jQueryForm.js"></script>
    <script type="text/javascript" src="/js/commonAll.js"></script>
    <script> //插件传入的都是json对象

    $(function () {

        //提交之前给订单明细设置索引,将提交设置为普通按钮,提交之前设置索引
        //至少有一条明细才执行
        $(".submit").click(function () {
            //提交之前item设置索引

            $.each($("#edit_table_body tr"), function (i, ele) {
                $(ele).find("[tag='pid']").prop("name", "items[" + i + "].product.id");
                $(ele).find("[tag='costPrice']").prop("name", "items[" + i + "].costPrice");
                $(ele).find("[tag='number']").prop("name", "items[" + i + "].number");
                $(ele).find("[tag='remark']").prop("name", "items[" + i + "].remark");
            })
            //必须要有明细才提交表单
            if (!$("#edit_table_body tr:first input[tag='pid']").val()) {
                //提醒用户至少选择一个明细
                showAlog("至少选择一个明细!")

                return;
            }
            $("#editForm").submit()
            location.href="/stockIncomebill/list.do";
        })
        //删除订单明细
        $(".removeItem").click(function () {
            $(this).closest("tr").remove();
        })

        //点击放大,弹出窗口 选中商品
        $(".searchproduct").click(function () {
            //拿到放大镜所在的行,数据回显
            var tr = $(this).closest("tr")


            //配置不会查演示项目
            $.dialog.open("/product/listView.do", {
                    title: "选择商品", //标题
                    width: "85%", //宽度
                    height: "85%", //高度
                    lock: true, //锁定模式
                    resize: false, //不允许重置
                    //给子窗口的关闭绑定一个事件
                    close: function () {
                        //pid pname bran costPrice num:1 小计:costPrice
                        //拿到共享数据回显
                        //获取子窗口回传的数据
                        //共享数据使用变量存起来
                        var json = $.dialog.data("json");


                        //然后删掉作用域里面的数据 就不会掉x关闭 也拿到作用域里面的数据
                        //判断变量是否有数据存在 有就回显
                        $.dialog.removeData("json");
                        console.log(json.pid);
                        if (json) {
                            tr.find("[tag='pid']").val(json.pid);
                            tr.find("[tag='name']").prop("value", json.name);
                            tr.find("[tag='costPrice']").val(json.costPrice);
                            tr.find("[tag='number']").val(1);
                            tr.find("[tag='brand']").html(json.brandName);
                            tr.find("[tag='amount']").html(json.costPrice.toFixed(2));
                        }
                    }
                }
            )


        })

        //使用类选择将所有设置时间的添加日历选择效果
        $(function () {
            $(".wdate").click(function () {

                WdatePicker({
                    readOnly: true,
                    maxDate: new Date(),
                    //   minDate:
                })
            })
        })

        $("#editForm").validate({
                rules: {
                    name: {
                        required: true,
                        rangelength: [2, 10]
                    },
                    sn: {
                        required: true,
                        rangelength: [2, 10]
                    }

                },

            }
        );
        //console.log(666);
        //异步提交表单要在js拦截之后,如果js拦截成功,不会执行下面的代码,拦截只做同步拦截
        $("#editForm").ajaxForm(function (data) {
            //提交成功后刷新界面
            if (data.success) {
                location.href = "/stockIncomebill/list.do";
            }
        })
        //单据计算
        $("#item input[type='number']").blur(function () {
            // console.log($(this).closest("tr"));
            var a = $(this).closest("tr").find("input[type='number']").first().val()
            var b = $(this).closest("tr").find("input[type='number']").last().val()
            if (a && b) {

                $(this).closest("tr").find("span[tag='amount']").html((a * b).toFixed(2));
            }

        })

        var cp = $("#item").clone(true);
        //clone 添加表单明细 amount
        $(".appendRow").click(function () {
            $(cp.clone(true)).appendTo("#edit_table_body")
        })

    })</script>
</head>
<body>
<form id="editForm" action="/stockIncomebill/saveOrUpdate.do" method="post">
    <input type="hidden" name="id" value="${entity.id}">
    <div id="container">
        <div id="nav_links">
            <span style="color: #1A5CC6;">订单编辑</span>
            <div id="page_close">
                <a>
                    <img src="/images/common/page_close.png" width="20" height="20" style="vertical-align: text-top;"/>
                </a>
            </div>
        </div>
        <div class="ui_content">
            <table cellspacing="0" cellpadding="0" width="100%" align="left" bstockIncome="0">
                <%--录入人--%>

                <tr>
                    <td class="ui_text_rt" width="140">订单编码</td>
                    <td class="ui_text_lt">
                        <input name="sn" value="${entity.sn}" class="ui_input_txt02"/>
                    </td>
                </tr>
                <tr>
                    <td class="ui_text_rt" width="140">供应商</td>

                    <td>

                        <select class="ui_select01 btn_dept" name="depot.id">

                            <c:forEach items="${depots}" var="d">

                                <option value=${d.id}>${d.name}</option>
                            </c:forEach>
                        </select>
                        <c:if test="${not empty depotId}">
                            <script>$("select[name='depotId'] option[value=${entity.depot.id}]").prop("selected", true)</script>
                        </c:if>
                    </td>
                </tr>


                <tr>
                    <td class="ui_text_rt" width="140">业务时间</td>
                    <td class="ui_text_lt">

                        <input name="vdate" value=" <fmt:formatDate value="${entity.vdate}"/>"
                               class="ui_input_txt02 wdate"/>
                    </td>
                </tr>
                <tr>
                    <td class="ui_text_rt" width="140">明细</td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <input type="button" value="添加明细" class="ui_input_btn01 appendRow"/>
                        <table class="edit_table" cellspacing="0" cellpadding="0" bstockIncome="0">
                            <thead>
                            <tr>
                                <th width="10"></th>
                                <th width="170">货品</th>
                                <th width="100">品牌</th>
                                <th width="80">价格</th>
                                <th width="80">数量</th>
                                <th width="100">金额小计</th>
                                <th width="180">备注</th>
                                <th width="120"></th>
                            </tr>
                            </thead>
                            <tbody id="edit_table_body">
                            <c:choose>
                                <c:when test="${empty entity}">
                                    <tr id="item">
                                        <td></td>
                                        <td>
                                            <input disabled readonly class="ui_input_txt01" tag="name"/>
                                            <img src="/images/common/search.png" class="searchproduct"/>
                                            <input type="hidden" tag="pid"/>
                                        </td>
                                        <td><span tag="brand"></span></td>
                                        <td><input type="number" tag="costPrice" class="ui_input_txt01"/>
                                        </td>
                                        <td><input type="number" tag="number" class="ui_input_txt01"/></td>
                                        <td><span tag="amount"></span></td>
                                        <td><input tag="remark" class="ui_input_txt01"/></td>
                                        <td>
                                            <a href="javascript:;" class="removeItem">删除明细</a>
                                        </td>
                                    </tr>
                                </c:when>
                                <c:otherwise>
                                    <c:forEach var="item" items="${entity.items}">
                                        <tr id="item">
                                            <td></td>
                                            <td>
                                                <input disabled readonly class="ui_input_txt01" tag="name" value="${item.product.name}"/>
                                                <img src="/images/common/search.png" class="searchproduct"/>
                                                <input type="hidden" tag="pid" value="${item.product.id}"/>
                                            </td>
                                            <td><span tag="brand">${item.product.brand.name}</span></td>
                                            <td><input type="number" tag="costPrice" value="${item.costPrice}" class="ui_input_txt01"/>
                                            </td>
                                            <td><input type="number" tag="number" value="${item.number}" class="ui_input_txt01"/></td>
                                            <td><span tag="amount">${item.totalAmount}</span></td>
                                            <td><input tag="remark" class="ui_input_txt01" value="${item.remark}"/></td>
                                            <td>
                                                <a href="javascript:;" class="removeItem">删除明细</a>
                                            </td>
                                        </tr>
                                    </c:forEach>
                                </c:otherwise>
                            </c:choose>

                            </tbody>
                        </table>
                    </td>
                </tr>


                <tr>
                    <td>&nbsp;</td>
                    <td class="ui_text_lt">
                        &nbsp;<input type="button" value="确定保存" class="ui_input_btn01 submit"/>
                        &nbsp;<input id="cancelbutton" type="button" value="重置" class="ui_input_btn01"/>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</form>
</body>
</html>
